<template>
  <tc-card>
    <tc-flex>
      <tc-flex class="bar" direction="column" @click="itemClick(index)"
        v-for="(item, index) of list" :key="index">
        <tc-flex class="circle">
          <tc-icon :icon="item.icon"></tc-icon>
        </tc-flex>
        <span class="title">{{ item.name }} </span>
      </tc-flex>
    </tc-flex>
  </tc-card>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcCard from '@/controls/TcCard.vue'
  import TcIcon from '@/controls/TcIcon.vue'

  @Component({
    components: {
      TcCard,
      TcIcon
    }
  })
  export default class TcBarCard extends Vue{
    @Prop()
    list: any[]

    itemClick (index) {
      this.$emit('barClick', index)
    }
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @font-color, @icon-color){
  .bar{
    flex: 1;
    height: @tc-bar-card-height;
    
    .circle{
      width: @tc-bar-card-circle-size;
      height: @tc-bar-card-circle-size;
      border-radius: @tc-bar-card-circle-size;
      background-color: @background-color;
      .icon{
        color: @icon-color;
        width: @tc-bar-card-icon-size;
        height: @tc-bar-card-icon-size;
      }
    }

    .title{
      margin-top: @tc-bar-card-separation;
      color: @font-color;
      font-size: @tc-bar-card-font-size;
    }
  }
}
.theme-default{
  .theme(@default-tc-bar-card-background-color, @default-tc-bar-card-font-color, @default-tc-bar-card-icon-color)
}
.theme-dark{
  .theme(@dark-tc-bar-card-background-color, @dark-tc-bar-card-font-color, @dark-tc-bar-card-icon-color)
}
</style>
